<template>
  <div class="app-container">
    <div class="app-title">
      <span>维护批次工资信息</span>
    </div>
    <!-- 切换按钮 -->
    <el-row :gutter="20">
      <el-col :span="8">
        <el-col :span="1">
          <i :class="[treeShow ? 'el-icon-s-fold treeI' : 'el-icon-s-unfold treeI']" @click="toggerTree" />
        </el-col>
        <div class="tap-fillet  wtq">
          <el-radio-group v-model="activeName" style="margin-left:4rem; width:700px; height:15px; margin-top:-57px">

            <el-radio-button label="0" name="report">
              <img style="height:12px;" :src="Untreatedimg">
              未送审
            </el-radio-button>
            <el-radio-button label="1" name="noReport"><img style=" height:12px;" :src="Processedimg">已送审
            </el-radio-button>
            <el-radio-button label="-1" name="refund"><img style="height:12px;" :src="Backimg">被退回</el-radio-button>
            <el-radio-button label="all" name="all"><img style=" height:12px;" :src="allimgSrc">全部</el-radio-button>
          </el-radio-group>
        </div>
      </el-col>
      <!--功能按钮-->
      <div class="filter-container">
        <div class="longbuton">
          <el-col style="text-align:right;margin-top: -3px;" :span="16">
            <el-button size="small" class="filter-item" style="margin-left: 10px;" type="primary" @click="Query">
              查询
            </el-button>
            <el-button v-if="activeName === '0' || activeName === '-1'" size="small" class="filter-item"
              style="margin-left: 10px;" type="primary" @click="handleEdit">
              修改
            </el-button>
            <el-button v-if="activeName === '0' || activeName === '-1'" size="small" class="filter-item"
              style="margin-left: 10px;" type="primary" @click="handleEditAll">
              批量修改
            </el-button>
            <el-button v-if="activeName === '0' || activeName === 'all'" size="small" class="filter-item"
              style="margin-left: 10px;" type="primary" @click="outPutFile">
              模板导出
            </el-button>
            <el-button v-if="activeName === '0'" size="small" class="filter-item" style="margin-left: 10px;"
              type="primary" @click="importFile">
              导入
            </el-button>
            <el-button v-if="activeName === '0' || activeName === '-1'" size="small" class="filter-item"
              style="margin-left: 10px;" type="primary" :loading="saveBtnLoading" @click="handleSave">
              保存
            </el-button>
            <el-button v-if="activeName === '0' || activeName === '-1'" size="small" class="filter-item"
              style="margin-left: 10px;" type="primary" :loading="rejectEditBtnLoading" @click="handleRejectEdit">
              撤销修改
            </el-button>
            <!-- <el-button v-if="activeName === '0'" size="small" class="filter-item" style="margin-left: 10px;" type="primary">
              导出模板
            </el-button> -->

            <!-- <el-button v-if="activeName === 'all'" size="small" class="filter-item" style="margin-left: 10px;" type="primary" @click="handleEdit">
              编报
            </el-button> -->
            <!-- <el-button v-if="activeName === 'all'" size="small" class="filter-item" style="margin-left: 10px;" type="primary" @click="handleCancelEdit">
              取消编报
            </el-button> -->
            <el-button v-if="activeName === '0' || activeName === '-1'" size="small" class="filter-item"
              style="margin-left: 10px;width:120px" type="primary" :loading="submitBtnLoading" @click="handleSubmit">
              <!-- 全部送审 -->报送财务审核
            </el-button>
            <!-- <el-button v-if="activeName === '0' || activeName === '-1' " size="small" class="filter-item" style="margin-left: 10px;width:120px" type="primary" :loading="submitBtnLoadings" @click="handleSubmitAll">
              全部送审批量财务审核
            </el-button> -->

            <!-- <el-button v-if="activeName === '0' || activeName === '-1' " size="small" class="filter-item" style="margin-left: 10px;" type="primary" @click="handleCancelEdit">
              取消修改
            </el-button> -->

            <el-button v-if="activeName === '1'" size="small" class="filter-item" style="margin-left: 10px;"
              type="primary" :loading="rejectSubmitBtnLoading" @click="handleRejectSubmit">
              撤销送审
            </el-button>
            <el-button size="small" class="filter-item" style="margin-left: 10px;" type="primary" @click="appendixOpen">
              附件管理
            </el-button>
            <el-button size="small" class="filter-item" style="margin-left: 10px;" type="primary" @click="processnode">
              审核日志
            </el-button>
          </el-col>
        </div>
      </div>
    </el-row>

    <div class="grid-content bg-purple" />

    <div ref="box" class="box">
      <div class="left" :class="[isActive ? 'wid' : 'wids']">
        <div :class="[treeShow ? 'treeShow' : 'treeNotShow']" :style="{ 'height': treeHeight + 'px' }">
          <AgencyTree class="agencyTree" @handleTreeQuery="handleTreeQuery"
            @getFirstAuthAgencyData="getFirstAuthAgencyData" />
        </div>
      </div>
      <div v-show="Show" class="resize" title="收缩侧边栏" />
      <div class="mid" :class="[isActive ? 'mids' : 'min']">
        <unitSalaryMultipleReportChildren :key="timer" ref="chil" :tree-data="treeData" :tab-pane="activeName"
          @handleSubmitBtnLoading="handleSubmitBtnLoading" @handleSubmitBtnLoadings="handleSubmitBtnLoadings"
          @trueSubmitBtnLoadings="trueSubmitBtnLoadings" @handleSaveBtnLoading="handleSaveBtnLoading"
          @handleRejectEditBtnLoading="handleRejectEditBtnLoading"
          @handleRejectSubmitBtnLoading="handleRejectSubmitBtnLoading" />
      </div>
      <Drag ref="icon" />
    </div>
  </div>
</template>

<script>
import unitSalaryMultipleReportChildren from '@/views/unitSalaryReport/children/unitSalaryMultipleReportChildren'
import AgencyTree from '@/components/tree/agencyTree'
import Drag from '@/components/Drag'

export default {
  name: 'unitSalaryMultipleReport',
  components: { unitSalaryMultipleReportChildren, AgencyTree, Drag },
  data() {
    return {
      treeHeight: null,
      isActive: true,
      Show: false,
      treeShow: false,
      treeData: '',
      param5: this.$route.params.isback,
      allimgSrc: require('@/assets/images/all.png'),
      Untreatedimg: require('@/assets/images/select.png'),
      Processedimg: require('@/assets/images/blueselect.png'),
      Backimg: require('@/assets/images/blueselect.png'),
      timer: '',
      activeName: '0',
      all: true,
      noSubmit: false,
      isSubmit: false,
      submitBtnLoading: false,
      submitBtnLoadings: false,
      saveBtnLoading: false,
      rejectEditBtnLoading: false,
      rejectSubmitBtnLoading: false
    }
  },
  watch: {
    activeName(val) {
      this.timer = new Date().getTime()
      if (val === 'all') {
        this.allimgSrc = require('@/assets/images/whiteall.png')
        this.Untreatedimg = require('@/assets/images/blueselect.png')
        this.Processedimg = require('@/assets/images/blueselect.png')
        this.Backimg = require('@/assets/images/blueselect.png')
      } else if (val === '0') {
        this.allimgSrc = require('@/assets/images/all.svg')
        this.Untreatedimg = require('@/assets/images/select.png')
        this.Processedimg = require('@/assets/images/blueselect.png')
        this.Backimg = require('@/assets/images/blueselect.png')
      } else if (val === '1') {
        this.allimgSrc = require('@/assets/images/all.png')
        this.Untreatedimg = require('@/assets/images/blueselect.png')
        this.Processedimg = require('@/assets/images/select.png')
        this.Backimg = require('@/assets/images/blueselect.png')
      } else if (val === '-1') {
        this.allimgSrc = require('@/assets/images/all.png')
        this.Untreatedimg = require('@/assets/images/blueselect.png')
        this.Processedimg = require('@/assets/images/blueselect.png')
        this.Backimg = require('@/assets/images/select.png')
      } else {
        this.allimgSrc = require('@/assets/images/all.png')
        this.Processedimg = require('@/assets/images/blueselect.png')
        this.Untreatedimg = require('@/assets/images/blueselect.png')
        this.Backimg = require('@/assets/images/blueselect.png')
      }
    }
  },
  created() {
    this.isback()
  },
  mounted() {
    this.dragController()
    this.getTeHeight()
  },
  beforeMount() {
    window.addEventListener('resize', this.getTeHeight)
  },
  methods: {
    getFirstAuthAgencyData(data) {
      this.treeData = data
    },
    getTeHeight() {
      this.treeHeight = window.innerHeight - 213
    },
    // 拖拽
    dragController() {
      this.$refs.icon.dragControllerDiv()
    },
    toggerTree() {
      this.treeShow = !this.treeShow
      this.isActive = !this.isActive
      this.Show = !this.Show
    },
    handleTreeQuery(data) {
      if (data && data.isleaf === '1') {
        this.treeData = data
      }
    },
    // 查询
    Query() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.$refs.chil.query()
      }
    },
    // 批量修改
    handleEditAll() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.$refs.chil.handleEditAll()
      }
    },
    handleEdit() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.$refs.chil.handleEdit()
      }
    },
    handleCancelEdit() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.$refs.chil.handleCancelEdit()
      }
    },
    handleSubmit() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.submitBtnLoading = true
        this.$refs.chil.handleSubmit()
      }
    },
    handleSubmitAll() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.$refs.chil.handleSubmitAll()
      }
    },
    handleSubmitBtnLoading() {
      this.submitBtnLoading = false
    },
    handleSubmitBtnLoadings() {
      this.submitBtnLoadings = false
    },
    trueSubmitBtnLoadings() {
      this.submitBtnLoadings = true
    },
    handleSave() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.saveBtnLoading = true
        this.$refs.chil.handleSave()
      }
    },
    handleSaveBtnLoading() {
      this.saveBtnLoading = false
    },
    handleRejectEdit() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.rejectEditBtnLoading = true
        this.$refs.chil.handleRejectEdit()
      }
    },
    handleRejectEditBtnLoading() {
      this.rejectEditBtnLoading = false
    },
    handleRejectSubmit() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.rejectSubmitBtnLoading = true
        this.$refs.chil.handleRejectSubmit()
      }
    },
    handleRejectSubmitBtnLoading() {
      this.rejectSubmitBtnLoading = false
    },
    processnode() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.$refs.chil.processnode()
      }
    },
    // 打开附件
    appendixOpen() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.$refs.chil.appendixOpen()
      }
    },
    // 导出
    outPutFile() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.$refs.chil.outPutFile()
      }
    },
    // 导入
    importFile() {
      if (this.treeData && this.treeData.isleaf === '1') {
        this.$refs.chil.importFile()
      }
    },
    // 如果是被退回则进入被退回页签
    isback() {
      if (this.param5 === 1) {
        this.activeName = '-1'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.app-title {
  margin-bottom: 15px;
  height: 20px;
  border-bottom: 1px solid #dcdfe6;
}
</style>
